<template>
  <div>
      <table border="1" cellspacing="0" width="80%">
        <thead>
          <tr><th>姓名</th><th>生日</th><th>职位</th><th>状态</th><th>操作</th></tr>
        </thead>

        <tbody>
            <tr v-for="em in cutBean.records" :key="em.id">
              <td>{{em.name}}</td>
              <td>{{em.birthday}}</td>
              <td>{{em.job}}</td>
              <td>{{em.status}}</td>
              <td><input type="button" v-if="em.status == '在职'" value="离职" @click="dismisson(em.id)"/>
                <input type="button" v-if="em.status == '在职'" value="修改" @click="findById(em.id)"/></td>
            </tr>
        </tbody>
      </table>
      <div>
        <input type="button" v-for="pg in cutBean.pages" :key="pg"
        :value="pg" style="margin-left: 10px" @click="findByItem(pg)">
      </div>
    <input type="button" value="添加" @click="isAddDiv = true"/>

      <div>
        姓名：<input  type="text" v-model="findObj.name"><br>
        起始日期：<input  type="text" v-model="findObj.startDate"><br>
        结束日期：<input  type="text" v-model="findObj.endDate"><br>
        <input type="button" value="查询" @click="findByItem(1)"/>
      </div>


      <div class="dialogDiv" v-if="isUpdateDiv">
          <div class="contentDiv">
              <img :src="'/project/emImg/'+updateObj.face" width="200" height="200"><br>
              姓名：{{updateObj.name}}<br>
              生日：{{updateObj.birthday}}<br>
              职位：<input type="text" v-model="updateObj.job"><br>
              状态：{{updateObj.status}}<br>
              <input type="button" value="修改" @click="updateEmployee">
          </div>
      </div>

    <div class="dialogDiv" v-if="isAddDiv">
      <div class="contentDiv">
        姓名：<input type="text" v-model="addObj.name"><br>
        生日：<input type="text" v-model="addObj.birthday"><br>
        职位：<input type="text" v-model="addObj.job"><br>
        头像：<input type="file" ref="faceFile"><br>
        <input type="button" value="添加" @click="addEmployee">
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import Index from "@/Index";
export default {
  components: {Index},
  data() {
    return {
      cutBean:{}, //动态条件查询分页对象
      findObj:{}, //查询条件对象
      isUpdateDiv:false, //是否显示修改弹出框
      isAddDiv:false, //是否显示添加弹出框
      updateObj:{}, //修改对象
      addObj:{} //添加对象
    }
  },
  methods:{
    findByItem(pageNO){//动态条件分页查询
      this.findObj.pageNO = pageNO;
      axios.get("/project/em/findByItem",{params:this.findObj})
        .then(resp =>{
          this.cutBean = resp.data;
        })
    },
    dismisson(id){ //员工离职
      axios.get("/project/em/dimission",{params:{id}}).then(resp=>{
        if(resp.data == "ok"){
          this.findByItem(1);
        }
      })
    },
    findById(id) { //按ID查询
      this.isUpdateDiv = true;
      axios.get("/project/em/findById",{params:{id}}).then(resp=>{
        this.updateObj = resp.data;
      });
    },
    updateEmployee(){ //修改员工职位
      axios.get("/project/em/update",{params:this.updateObj}).then(resp =>{
        if(resp.data == "ok"){
          this.isUpdateDiv = false;
          this.findByItem(1);
        }
      });
    },
    async addEmployee(){//添加员工
      //上传员工头像
      var emObj = new FormData();
      emObj.append("faceImg",this.$refs.faceFile.files[0]);

      //上传文件请求头
      let config = {
        headers: {'Content-Type': 'multipart/form-data' }
      }

      //接收服务器发送给客户端的上传文件名
      var face = "";
      await axios.post("/project/upload",emObj,config).then(resp=>{
          face = resp.data;
      });

      //将上传文件名，添加到addObj对象中
      this.addObj.face = face;
      //向服务器发送请求，完成添加
      axios.get("/project/em/add",{params:this.addObj}).then(resp=> {
            if(resp.data == "ok"){
              this.findByItem(1);
              this.isAddDiv = false;
            }
          }
      );
    }
  },
  created() {
    this.findByItem(1);
  }
}
</script>

<style scoped>
  .dialogDiv{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    background: rgba(255,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .contentDiv{
    width: 600px;
    height: 400px;
    padding: 20px;
    border: 2px solid #000;
    background: white;
  }
</style>